<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<!--<th:block th:include="include :: header('新增会议文件')" />-->
    <th:block th:include="include :: header('文件上传')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-files-add">
<!--            <input name="conId" id="conId" value="12" type="hidden">-->
<!--            <div class="col-xs-12">-->
<!--                <div class="form-group">-->
<!--                    <label class="col-sm-3 control-label">转换文件的提示：</label>-->
<!--                    <div class="col-sm-8">-->
<!--                        <input name="file" class="form-control" type="file">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="font-noraml">单文件上传</label>
                <div class="file-loading">
                    <input id="singleFile" name="file" type="file">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">

        let conId = [[${conId}]];
        let file;
        let originalFilename;
        var prefix = ctx + "system/files"

        $("#form-files-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            // if ($.validate.form()) {
            //     $.operate.save(prefix + "/add", $('#form-files-add').serialize());
            // }
            console.log(conId)
            console.log(file)
            $.ajax({
                url:prefix+"/add",
                type:"post",
                data:{
                    "conId":conId,
                    "file":file,
                    "fileName":originalFilename
                },
                success:function(result){
                    if(typeof callback =="function"){
                        callback(result);
                    }
                    $.operate.successCallback(result);
                }
            })
        }

        // $("input[name='createdTime']").datetimepicker({
        //     format: "yyyy-mm-dd",
        //     minView: "month",
        //     autoclose: true
        // });
        //
        // $("input[name='updatedTime']").datetimepicker({
        //     format: "yyyy-mm-dd",
        //     minView: "month",
        //     autoclose: true
        // });
    </script>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">

        $(document).ready(function () {
            // 单图上传
            $("#singleFile").fileinput({
                uploadUrl: ctx + 'common/upload',
                maxFileCount: 1,
                autoReplace: true
            }).on('fileuploaded', function (event, data, previewId, index) {
                var rsp = data.response;
                // $('#singleFile').val(rsp.fileName)
                file =(rsp.fileName)
                originalFilename = rsp.originalFilename
                log.info("return url：" + rsp.url)
                log.info("reutrn fileName：" + rsp.fileName)
                log.info("reutrn newFileName：" + rsp.newFileName)
                log.info("return originalFilename：" + rsp.originalFilename)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })

        });
    </script>
</body>
</html>